
<template>
  <nav-bar>
    <div slot="left" @click='goBack' class='back'>
      <img src='~assets/img/common/back.svg' /> </div>
    <div slot="center" class='title'>
      <span v-for='(v,i) in titles' :key='i' @click='titleClick(i)' :class="[i===curIdx ?'active' :'' ]">{{v}}</span> </div>
  </nav-bar>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
  components: { NavBar },
  props: {},
  data() {
    return { titles: ['商品', '参数', '评论', '推荐'], curIdx: 0 }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    titleClick(i) {
      this.curIdx = i
      this.$emit('navClick', i)
    }
  }
}
</script>

<style scoped>
.back img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.title {
  display: flex;
}
.title > span {
  flex: auto;
}
.active {
  color: var(--color-tint);
}
</style>